/* Layout and backgrounds */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height: 100%;
    background-image: url(../images/background/background.gif);
    background-color: #282828;
    width: 100%;
    font-size: 90%;
}

#container {
    position: relative;
    clear: both;
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#colmid {
    float: left;
    width: 200%;
    height: 100%;
    position: relative;
    left: 50%;              /* => left edge of #sidebar in middle of viewport. */
    margin-left: -154px;    /* =  -(width of #sidebar)/2
                               => middle of #sidebar in middle of viewport. */
}
#colright {
    float: left;
    position: relative;
    width: 100%;            /* => takes full width of parent #colmid */
    height: 100%;
    left: 308px;         	/* = width of #sidebar
                               => on right side of #sidebar */
}
#leftwrap {
    float: left;
    position: relative;
    height: 100%;
    width: 25%;             /* =  25% of parent #colright
                               => width = (width of viewport)/2 */
    right: 25%;             /* => on left side of #colright but still on top of #sidebar */
}
#left {
    margin-right: -15px;    /* => #left under #sidebar */
    margin-top: 139px;      /* = distance to top of #left */
    right: 308px;           /* = width of #sidebar
                               => on left side of #sidebar */
    float: right;           /* => on left side of #sidebar */
    width: 271px;
    height: 573px;          /* fixed height = height of background */
    position: relative;
    overflow: hidden;
    background: url(../images/background/left-background.png) no-repeat top right;
}
#rightwrap {
    float: left;
    position: relative;
    width: 25%;             /* = 25% of width of parent #colright
                               => width = (width of viewport)/2 */
    right: 25%;             /* => on right side of #leftwrap
                               CAUTION: order of #leftwrap and #rightwrap is important ! */
}
#right {
    overflow: hidden;
    position: relative;
    margin-left: -15px;     /* => #right under #sidebar */
    margin-top: 139px;      /* = distance to top of #right */
    height: 573px;          /* fixed height = height of background */
    width: 271px;           /* fixed width = width of background*/
    background: url(../images/background/right-background.png) no-repeat top left;
}
#left .content {
    margin: 50px 20px 0px 40px;
}
#right .content {
    margin: 50px 40px 0px 20px;
}
#sidebarwrap {
    float: left;
    position: relative;
    width: 308px;        	/* fixed width = width of background image */
    height: 720px;
    right: 50%;             /* => left side of content of #sidebar on right side of #sidebar */
    margin-left: -308px;  	/* = -(width of #sidebar)
                               => content of #sidebar on top of #sidebar */
    z-index: 8000;
}
#sidebar {
    background: url(../images/background/central-background.png) repeat-y top center;
    height: 100%;
}
#logo {
    margin: 0 auto 30px auto;   /* centered + bottom margin */
    width: 198px;               /* = width of image */
    height: 155px;              /* = height of image */
}
#navigation {
    width: 272px;               /* = width of sidebar - 2 x shadow (15px) - 2 x border (3px) */
    margin: 0 18px 0 18px;      /* margin-left, margin-right = shadow + border = 15px + 3px */
}
#navigation .cat-item {
    border: 3px solid #434343;  /* border around every category */
    width: 174px;               /* width without border ! */
    height: 108px;              /* height without border ! */
    margin: 0 49px 19px 49px;   /* margin-left, margin-right = ((width #navigation) - (width .cat-item))/2 */
}
#footer {
    background: url(../images/background/central-background.png) repeat-y top center;
    height: 100%;
    width: 308px;
    margin: auto;
}

